<div class="header">
    <h1>实时数据看板</h1>
    <div class="status-bar">
        <span>服务器状态：</span>
        <span id="server-status" class="status-indicator">检测中...</span>
    </div>
    <div class="control-buttons">
        <button data-action="start" class="start-btn">启动连接</button>
        <button data-action="stop" class="stop-btn">停止连接</button>
        <button data-action="reconnect" class="btn reconnect">重新连接</button>
        <button data-action="resetmatch" class="resetmatch-btn">重置比赛</button>
    </div>
</div>

<div class="filter-section">
    <div class="search-box">
        <input type="text" placeholder="搜索设备或选手...">
        <button>搜索</button>
    </div>
    <div class="filters">
        <select>
            <option>全部赛段</option>
            <option>5公里</option>
            <option>半程</option>
            <option>全程</option>
        </select>
        <input type="date" class="date-filter">
    </div>
</div>

<div class="stats-cards">
    <div class="card">
        <h3>今日参与人数</h3>
        <p class="number">1,234</p>
    </div>
    <div class="card">
        <h3>当前在线设备</h3>
        <p class="number">12</p>
    </div>
    <div class="card">
        <h3>数据更新时间</h3>
        <p class="number">2024-03-15 14:30</p>
    </div>
</div>

<div class="data-table">
    <table>
        <thead>
            <tr>
                <th>选手ID</th>
                <th>姓名</th>
                <th>参赛编号</th>
                <th>国家</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 示例数据 -->
            <tr>
                <td>DEV-001</td>
                <td>14:28:45</td>
                <td>5公里</td>
                <td>1,234</td>
                <td><span class="status active">在线</span></td>
            </tr>
            <tr>
                <td>DEV-005</td>
                <td>14:25:12</td>
                <td>起点</td>
                <td>2,345</td>
                <td><span class="status warning">低电量</span></td>
            </tr>
        </tbody>
    </table>
    
    <div class="pagination">
        <button disabled>上一页</button>
        <span class="current">第1页</span>
        <button>下一页</button>
    </div>
</div>